<template>
  <frame-comp>
    <div slot="leftMenu">
      <Menu theme="dark" @on-select="menuSelect" :open-names="[1]" :accordion="isAccordion">
        <Submenu :name="index" v-for="(item,index) in $router.options.routes" :key="index" v-if="!item.hidden">
          <template slot="title">
            <Icon type="ios-paper"></Icon>
              {{item.title}}
            </template>
          <MenuItem :name="subItem.name" v-for="(subItem,subIndex) in item.children" :key="subIndex">{{subItem.title}}</MenuItem>
        </Submenu>
          <Submenu name="layout_demo">
              <template slot="title">
                  <Icon type="ios-people"></Icon>
                  字体&规范&布局
              </template>
              <MenuItem name="layout_demo_web">公共样式&规范</MenuItem>
              <MenuItem name="layout_logistics_demo_web">大物流样式</MenuItem>
              <MenuItem name="font_demo_web">公共字体库</MenuItem>
          </Submenu>
      </Menu>
    </div>
    <div slot="rightContent">
      <router-view class="app-router-view"></router-view>
    </div>
  </frame-comp>
</template>

<script>
  import frameComp from "../../components/frameComp.vue"

  export default {
      // 创建节点触发的事件
      created:function (){
          this.$bus.on("huangbiao-test",function(){
              alert("huangbiao-test");
              console.dir(arguments);
          })
      },
      // 销毁节点触发的事件，防止 一个事件的队列函数无限添加
      beforeDestroy: function() {
          this.$bus.off("huangbiao-test");
      },
    components: {
      frameComp
    },
    data: function () {
      return {
        // 标题
        activeTitle: "",
        openNames:['0'],
        isAccordion : true,
      }
    },
    methods: {
//      选中菜单，触发的事件
        menuSelect(name) {
            if(name == "font_demo_web"){
//                window.location.href = "/static/web_font/demo_fontclass.html"
                window.open("/static/web_font/demo_fontclass.html");
            }else if(name=="layout_demo_web"){
                window.open("/module/viewIndex.html");
            }else if(name=="layout_logistics_demo_web"){
                  window.open("/module/logisticsIndex.html");
            }else{
                this.$router.push({ "name": name });
            }
        }
    },
    computed: {
      name () {
        return this.$route.name
      },

      list () {
        return this.$route.matched
      }
    }
  }
</script>


<style lang="scss">
    @import '../../../zlst/style/public.scss';
    @import '../../../zlst/style/lib/zlst/zlstIndex.scss';

    body {
        background-color: #f8f9fa;
    }
  .app-body {
    .main {
      width: 100%;
      height: 100%;
      // 自路由 容器的样式
      .app-router-view {
        padding: 0 14px;
      }
    }
    .main-heading {
      width: 100%;
      height: 50px;
      line-height: 50px;
    }
  }

</style>
